﻿@{
    ViewBag.Title = "歌曲列表";
}

<script src="@Url.Content("~/Scripts/jQuery.tmpl.min.js")"></script>
<script src="@Url.Content("~/Scripts/Common/pageHandler.js")"></script>
<link href="@Url.Content("~/Content/PageHandler.css")" rel="stylesheet" />
<script id="tmplSongs" type="text/x-jquery-tmpl">
      <div class="divsongInfo" style="clear: both; font-size:small; height:18px; line-height:18px;">      
                 <div class="divellipsis" style="float: left; width: 200px;">${Name}</div>
                  <div class="divellipsis" style="float: left; width: 200px;"><a href="/Home/AlbumSongs/${AlbumID}">${Album}</a></div>        
                    <div class="divellipsis" style="float: left; width: 200px;"><a href="/AACInfo/SingerAlbums/${ArtistID}">${Artist}</a></div>
                    <div style="float: left; width: 100px; height:18px;">${Genre}</div>                    
                    <div style="float: left; width: 100px; text-align:center; height:18px;">${PlayedCount}</div>
                    <div title="收藏" class="divCollect" data-ID="${ID}"></div>  
                     <div title="播放" class="topPlay" data-ID="${ID}" data-Name="${Name}" data-artist="${Artist}" data-Location="${Location}" data-action="@Url.Action("Play", "AACInfo",null,null)" style="float: left;"  >
                        </div>   
                    <div title="添加" class="divAddSongs" data-ID="${ID}" data-Name="${Name}" data-artist="${Artist}" data-Location="${Location}" data-action="@Url.Action("Play", "AACInfo",null,null)"></div>                     
       </div> 
</script>
<div>
 
    <div style="clear:both;"></div>

    
    <div style="float:left; width:85%; border-right:solid 1px #E4E4E4;">
        <div class="dHeader" style="font-size: small; font-weight: bold">           
            <div style="float: left; width: 200px;">
                曲名</div>    
            <div style="float:left; width:200px;">专辑</div>    
            <div style="float: left; width: 200px;">
                艺术家</div>
            <div style="float: left; width: 100px;">
                风格</div>          
              <div style="float: left; width: 100px; text-align:center; ">
                播放次数</div>
            <div style="float: left; width: 100px;">
                </div>
        </div>
        <div style="height: 20px;">
        </div>
        <div id="dContent" class="dContent">           
        </div>
        <div id="divPage" style="width:910px;"></div>       
    </div>
    <div style="float:right; width:10%;">
        <div class="divlabel divorder currentorder" data-orderby="CreateDate desc">按时间排序</div>
        <div class="divlabel divorder" data-orderby="PlayedCount desc">按热度排序</div>
        <div class="divlabel divorder" data-orderby="Name">按曲名排序</div>
        <div class="divlabel">播放选中</div>
        <div class="divlabel">加入列表</div>
        <div class="divlabel">收藏选中</div>
    </div>
    </div>

<script type="text/javascript">
    $(document).ready(function () {
        $(".divMenu").removeClass("currentMenu");
        $("#divHomeSongsList").addClass("currentMenu");
        $("#txtQText").each(function () {
            var target = $(this);
            target.autocomplete({ source: "/Home/QuickSearch" });
        });       
        var page = new pageHandler({ pageID: "divPage", url: "/Home/SearchSongs", tmplID: "tmplSongs", contentID: "dContent", queryID: "txtQText" });
        page.orderby = "CreateDate desc";
        page.pageInit();
        $("#btnSearch").click(function () {
            page.pageInit();
        })

        $(".divorder").click(function () {
            $(".divorder").removeClass("currentorder");
            $(this).addClass("currentorder");
           orderby = $(this).attr("data-orderby");
           page.orderby = orderby;
           page.pageInit();
        });
    });   
</script>
